<template>
  <section class="movie-table">
    <!-- 工具栏 -->
    <div class="toolbar">
      <span class="sort-group">
        排序：
        <button
            :class="{ active: sortKey === 'hot' }"
            @click="setSort('hot')"
        >
          热度 <span>{{ sortOrder.hot === 'asc' ? '↑' : '↓' }}</span>
        </button>
        <button
            :class="{ active: sortKey === 'box' }"
            @click="setSort('box')"
        >
          票房 <span>{{ sortOrder.box === 'asc' ? '↑' : '↓' }}</span>
        </button>
      </span>
    </div>

    <!-- 表格 -->
    <div class="table-wrapper">
      <table>
        <thead>
        <tr>
          <th>#</th>
          <th>标题</th>
          <th>导演</th>
          <th>热度</th>
          <th>票房</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(row, idx) of pageData" :key="row.id">
          <td>{{ idx + 1 + (currentPage - 1) * pageSize }}</td>
          <td>{{ row.title }}</td>
          <td>{{ row.director }}</td>
          <td>{{ row.hot }}</td>
          <td>{{ row.box.toLocaleString() }}</td>
        </tr>
        </tbody>
      </table>
    </div>

    <!-- 分页 -->
    <div class="pagination">
      <button
          class="page-btn"
          :disabled="currentPage === 1"
          @click="currentPage--"
      >
        上一页
      </button>

      <span class="page-info">{{ currentPage }} / {{ totalPage }}</span>

      <button
          class="page-btn"
          :disabled="currentPage === totalPage"
          @click="currentPage++"
      >
        下一页
      </button>
    </div>
  </section>
</template>

<script setup>
import { computed, ref, onMounted, onUnmounted, nextTick } from 'vue'

/* ---------------- 数据 ---------------- */
const pageSize = ref(10)          // 每页条数
const currentPage = ref(1)        // 当前页
const sortKey = ref('')           // 当前排序字段  '' 表示默认
const sortOrder = ref({ hot: 'desc', box: 'desc' }) // 升/降序

// 排序函数
const toggle = key => {
  sortOrder.value[key] = sortOrder.value[key] === 'asc' ? 'desc' : 'asc'
}

// 点击按钮切换排序
const setSort = key => {
  sortKey.value = key
  toggle(key)
  currentPage.value = 1
}

// 计算排序后的数据
const sorted = computed(() => {
  if (!sortKey.value) return raw.value
  const key = sortKey.value
  const order = sortOrder.value[key]
  return [...raw.value].sort((a, b) =>
      order === 'asc' ? a[key] - b[key] : b[key] - a[key]
  )
})

// 分页数据
const pageData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  return sorted.value.slice(start, start + pageSize.value)
})

const totalPage = computed(() => Math.ceil(sorted.value.length / pageSize.value))

// 切换每页条数后回到第一页
const resetPage = () => (currentPage.value = 1)

// 从后端获取数据
// 从后端获取数据（一次性拉 50 条，前端自己分页）
// 一次性拉 50 条，前端自己分页/排序
async function fetchMovies() {
  const resp = await fetch('/api/queryTop50Movies?page=1&size=50');
  if (!resp.ok) throw new Error('fetch movies data error');
  const { data = [] } = await resp.json();   // 用 data 字段，兜底空数组
  return data.map((it, idx) => ({
    id: idx + 1,
    title: it.title,
    director: it.director,      // 后端字段名正确
    hot: Number(it.popularity.toFixed(1)),
    box: it.revenue
  }));
}

// 初始化数据
let raw = ref([]);
// 存储事件监听器的引用，以便正确移除
let resizeHandler = null;

onMounted(async () => {
  await nextTick();
  raw.value = await fetchMovies();

  // 定义resize处理函数并存储引用
  resizeHandler = () => {
    // 注意：这个组件本身没有图表，但代码中引用了chartRef
    // 这可能是导致问题的原因之一
    // 移除对不存在的chartRef的引用
    console.warn('Top50Movies组件中存在对chartRef的引用，但该组件不包含图表');
  };

  // 添加窗口resize事件监听器
  window.addEventListener('resize', resizeHandler);
});

// 正确地移除事件监听器
onUnmounted(() => {
  // 移除resize事件监听器
  if (resizeHandler) {
    window.removeEventListener('resize', resizeHandler);
  }

  // 移除对不存在的chartRef的引用
  // 原代码中尝试访问chartRef但该组件中并未定义此引用
})
</script>

<style scoped>
/* 整体容器保持原位 */
.movie-table {
  position: relative;
  left: 3%;
  top: -9vh;
  width: 77vw;
  height: 80vh;
  font-size: 14px;
}

/* 工具栏 - 顶部固定 */
.toolbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}

/* 排序按钮整体区域 */
.sort-group {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.sort-group button {
  padding: 6px 14px;            /* 去掉左侧留空 */
  border: 1px solid #d9d9d9;
  border-radius: 20px;          /* 胶囊 */
  background: linear-gradient(135deg, #ffffff 0%, #f5f5f5 100%);
  color: #595959;
  font-size: 14px;
  cursor: pointer;
  transition: all .3s ease;
  outline: none;
}

/* 激活状态 */
.sort-group button.active {
  background: linear-gradient(135deg, #5dabff 0%, #3c8dff 100%);
  color: #fff;
  border-color: #5dabff;
  box-shadow: 0 2px 8px rgba(93, 171, 255, .45);
}

/* hover 高亮 */
.sort-group button:hover:not(.active) {
  border-color: #5dabff;
  color: #5dabff;
}

/* 点击微动 */
.sort-group button:active {
  transform: scale(.96);
}

/* 表格容器：横向撑满，纵向滚动 */
.table-wrapper {
  width: 100%;          /* 撑满 1050px */
  max-height: 80vh;    /* 保持原可视高度 */
  overflow: auto;
  border: 1px solid #e4e7ed;
  border-top: none;
  border-radius: 10px;          /* 圆角 */
  background: #fff;
  margin-top: 1vh;
}

/* 表格本身：100% 宽度 */
table {
  width: 100%;
  border-collapse: collapse;
}

/* ===== 表头美化 ===== */
table thead tr {
  background: linear-gradient(135deg, #f5f7fa 0%, #e6e9f0 100%);
  font-weight: 600;
  color: #303133;
}

/* 每行固定高度，内容垂直居中 */
th, td {
  padding: 0 12px;      /* 去掉上下 padding，用行高撑 */
  height: 5vh;         /* 固定行高 */
  line-height: 48px;    /* 文字垂直居中 */
  border: 1px solid #e4e7ed;
  text-align: left;
  white-space: nowrap;
}

/* 表头固定 */
th {
  position: sticky;
  top: 0;
  background: #f5f7fa;
  z-index: 1;
}

/* ===== 隔行淡色 ===== */
table tbody tr:nth-child(even) {
  background-color: #fafbfc;
}

/* ===== 悬停高亮 ===== */
table tbody tr:hover {
  background-color: #f0f9ff;
  transition: background .25s ease;
}

/* 分页保持原样 */
.pagination {
  margin-top: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

/* 切换页码按钮容器 */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  user-select: none;
}

/* 按钮公共样式 */
.page-btn {
  padding: 6px 16px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background: #ffffff;
  color: #606266;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.25s;
  outline: none;
}

/* hover 交互 */
.page-btn:hover:not(:disabled) {
  border-color: #409eff;
  color: #409eff;
}

/* 禁用状态 */
.page-btn:disabled {
  border-color: #ebeef5;
  color: #c0c4cc;
  cursor: not-allowed;
}

/* 点击动效 */
.page-btn:active:not(:disabled) {
  transform: scale(0.95);
}

/* 当前页码信息 */
.page-info {
  font-size: 14px;
  color: #303133;
  min-width: 70px;
  text-align: center;
}
</style>